<template>
  <div :style="propStyle">
    <div class="Title">{{ title }}</div>
    <div class="Proportion" :style="styles" v-if="maxNum">
      <div class="chunk" v-for="(v, i) in newSource" :key="i">
        <div
          class="ProportionTitle"
          v-if="v.name"
          :style="{ width: left ? left : '' }"
        >
          {{ v.name }}
        </div>
        <div
          class="ProportionValue"
          :style="{ ...itemStyle, width: center ? center : '' }"
        >
          <div
            :style="
              transitionStart
                ? {
                    background: color,
                    marginLeft: (v.value / maxNum) * 100 - 100 + '%',
                  }
                : {}
            "
            class="ProporTionShow"
          ></div>
        </div>
        <div class="ProportionNum" :style="{ width: right ? right : '' }">
          <span :style="isTextColor ? { color: color } : {}">{{
            v.value
          }}</span>
          {{ v.unit ? v.unit : "" }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    source: Array,
    calculatePercent: { type: Boolean, default: false }, //是否转为百分比
    styles: Object,
    title: String,
    color: {
      type: String,
      default: "linear-gradient(90deg, #4898E2, #C9F9DF)",
    },
    left: String,
    center: String,
    right: String,
    marginTop: {
      type: Number,
      default: 15,
    },
    isTextColor: {
      type: Boolean,
      default: false,
    },
    itemStyle: {
      type: Object,
      default: () => {
        return { fontSize: "16px" };
      },
    },
  },
  data() {
    return {
      transitionStart: false,
    };
  },
  created() {
    let that = this;
    setTimeout(function () {
      that.transitionStart = true;
    }, 200);
  },
  computed: {
    newSource() {
      let res = [];
      if (this.calculatePercent) {
        //转为百分比
        let sum = 0;
        this.source.forEach((item) => {
          sum += parseFloat(item.value);
        });
        res = this.source.map((item) => {
          item.value = Math.round((item.value / sum) * 1000) / 10;
          item.unit = "%";
          return item;
        });
      } else {
        //不转换值
        res = this.source.map((item) => {
          item.value = parseFloat(item.value);
          return item;
        });
      }
      return res;
    },
    maxNum() {
      let max = 0;
      this.newSource.forEach((item) => {
        max = item.value > max ? item.value : max;
      });
      //最大值取1.2倍
      return max * 1.2;
    },
    propStyle() {
      return {
        "--marginTop": this.marginTop + "px",
      };
    },
  },
};
</script>

<style scoped lang="scss">
.Proportion {
  display: grid;
  grid-template-columns: repeat(auto-fill, 222px);
}
.chunk {
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  transition: 0.3s;
  margin-top: var(--marginTop);
}
.chunk:hover {
  background-color: #ffffff33;
}
.ProportionTitle {
  width: 32%;
  text-align: right;
}
.ProportionValue {
  width: 40%;
  background-color: rgba(36, 199, 104, 0.1);
  border: 1px solid #0efcff;
  opacity: 0.8;
  overflow: hidden;
  /* height: 14px; */
  margin: 3px 10px;
}
.ProportionValue div {
  width: 100%;
  height: 100%;
  margin-left: -100%;
  transition: 1s;
}
.ProportionNum {
  width: 18%;
  line-height: 22px;
}
.Title {
  font-size: 18px;
  text-align: left;
  font-weight: bold;
}
</style>
